import React, { Component } from 'react';

class Drawer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            long: 0
        };
    }
    beLonger=(cur)=> {
        this.setState({
            long: cur
        })
    }
    render() {
        return (
            <div className="drawer">
                <ul>
                    { 
                        this.props.bgs.map(function (item,index) {
                            return(
                                <li onMouseEnter={this.beLonger.bind(this,index)} className={this.state.long===index ? "be-long" : " "} key={index} style={{backgroundImage:"url(src/images/"+index+".jpg)"}}>
                                    {item}
                                </li>
                            )
                        }.bind(this))
                    }
                </ul>
            </div>
        )
    }
}

module.exports=Drawer;
